<template>
<!--  <div class="login">-->
<!--    <el-card class="box-card">-->
<!--      <div slot="header" class="clearfix">-->
<!--        <span >Admin</span>-->
<!--      </div>-->
<!--      <el-form label-width="80px" :model="form" ref="form" :rules="rules">-->
<!--        <el-form-item label="用户名" prop="username">-->
<!--          <el-input v-model="form.username"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="密码" prop="password">-->
<!--          <el-input type="password" v-model="form.password"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-button type="primary" @click="login('form')">Login</el-button>-->
<!--      </el-form>-->

<!--    </el-card>-->
<!--  </div>-->

  <div class="login-wrap">
    <el-form class="login-container" :model="form" ref="form" :rules="rules">
      <h1 class="title">Admin</h1>
      <el-form-item  prop="username">
        <el-input type="text" v-model="form.username" placeholder="用户账号" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="form.password" placeholder="用户密码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login('form')" style="width: 100%;">登陆</el-button>
      </el-form-item>
      <el-row style="text-align: center;margin-top: -10px;">
<!--        <el-link type="primary" @click="doRegister">注册账号</el-link>-->
<!--        <el-link type="primary" @click="">忘记密码</el-link>-->
      </el-row>
    </el-form>
    <verify ref="verify"></verify>
  </div>
</template>

<script>
import { nameRule, passRule } from '../utils/validate.js'
import { setToken } from '@/utils/setToken.js'
import { login } from '@/api/api.js'
import Verify from "@/components/common/Verify";
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [{ validator: nameRule, trigger: 'blur' }],
        password: [{ validator: passRule, trigger: 'blur' }]
      }
    }
  },
  methods: {
    login(form) {
      // this.$refs.verify.dialogVisible = true
      this.$refs[form].validate(valid => {
        if (valid) {
          console.log(this.form)
          // this.service.post('/login', this.form).then(res => {
          //   if (res.data.status === 200) {
          //     setToken('username', res.data.username)
          //     setToken('token', res.data.token)
          //     this.$message({ message: res.data.message, type: 'success' })
          //     this.$router.push('/home')
          //   }
          // })
          login(this.form).then(res => {
            if (res.data.status === 200) {
              setToken('username', res.data.username)
              setToken('token', res.data.token)
              this.$message({ message: res.data.message, type: 'success' })
              this.$router.push('/home')
            }
          })
        } else {
          console.error(this.form)
        }
      })
    }
  },
  components:{Verify}
}
</script>

<style lang="scss" scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  //background-image: url();
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
  .login-container {
    border-radius: 10px;
    margin: 0px auto;
    width: 350px;
    padding: 30px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
    .title {
      margin: 0px auto 40px auto;
      text-align: center;
      color: #505458;
    }
  }
}
</style>
